<template>
	<div class="app-container">
		<el-form :model="form"  ref="queryRef" :inline="true" label-width="118px">
			<div class="bgWhite radius8">
				<div class=" fb fs16 border-bottom pl30 line-64">
					产品详情
				</div>
				<div class="p20">
					<div class="fb mb20 pl10">
						基础信息
					</div>
					<el-form-item label="产品属性：" prop="productType">
						<div class="item-width">
							<dict-tag :options="bus_product_type" :value="form.productType" />
						</div>
					</el-form-item>
					<el-form-item label="产品名称：" prop="productName">
						<div class="item-width">{{form.productName}}</div>
					</el-form-item>
					<el-form-item label="品牌名称：" prop="brandName">
						<div class="item-width">{{form.brandName}}</div>
					</el-form-item>
					<el-form-item label="产品编码：" prop="productCode">
						<div class="item-width">{{form.productCode}}</div>
					</el-form-item>
					<el-form-item label="产品类别：" prop="productCategory">	
						<div class="item-width">
							<dict-tag :options="bus_product_category" :value="form.productCategory" />
						</div>				
					</el-form-item>
					<el-form-item label="农药登记证号：" prop="pesticideRegistrationNumber" label-width="110px" >
						<div class="item-width">{{form.pesticideRegistrationNumber}}</div>
					</el-form-item>
					<el-form-item label="农药生产许可证号：" prop="pesticideProductionLicenseNumber" label-width="150px">
						<div style="width: 206px">{{form.pesticideProductionLicenseNumber}}</div>
					</el-form-item>
					<el-form-item label="产品质量标准号：" prop="productQualityStandardNumber" label-width="138px">
						<div style="width: 216px">{{form.productQualityStandardNumber}}</div>
					</el-form-item>
					<el-form-item label="毒性：" prop="toxicity">
						<div class="item-width">
							<dict-tag :options="bus_toxicity" :value="form.toxicity" />
						</div>
					</el-form-item>
					<el-form-item label="剂型：" prop="dosageForm">
						<div class="item-width">
							<dict-tag :options="bus_sosage_form" :value="form.dosageForm" />
						</div>
					</el-form-item>
					<br>
					<el-form-item label="有效成分1：" prop="activeIngredient1" >
						<div class="item-width">
							{{form.activeIngredient1}}
						</div>
					</el-form-item>
					<el-form-item label="有效成分1含量：" prop="activeIngredientContent1">
						<div class="item-width flex col-center">
							{{form.activeIngredientContent1}}
							<dict-tag :options="bus_active_ingredient_content" :value="form.activeIngredientUnit1" />
						</div>
					</el-form-item>
					<el-form-item label="有效成分2：" prop="activeIngredient2">
						<div class="item-width">
							{{form.activeIngredient2}}
						</div>
					</el-form-item>
					<el-form-item label="有效成分2含量：" prop="activeIngredientContent2">
						<div class="item-width flex col-center">
							{{form.activeIngredientContent2}}
							<dict-tag :options="bus_active_ingredient_content" :value="form.activeIngredientUnit2" />
						</div>
					</el-form-item>
					<el-form-item label="有效成分3：" prop="activeIngredient3">
						<div class="item-width">
							{{form.activeIngredient3}}
						</div>
					</el-form-item>
					<el-form-item label="有效成分3含量：" prop="activeIngredientContent3">
						<div class="item-width flex col-center">
							{{form.activeIngredientContent3}}
							<dict-tag :options="bus_active_ingredient_content" :value="form.activeIngredientUnit2" />
						</div>
					</el-form-item>
					<br>
					<el-form-item label="产品宣传图：" prop="productPromoImageUrl" style="width: 350px;">
						<img :src="form.productPromoImageUrl" class="radius8" style="width: 110px;height: 110px;" />
					</el-form-item>
					<br>
					<el-form-item label="产品形象图：" prop="productImageUrl" style="width: 350px;">
						<img :src="form.productImageUrl" class="radius8" style="width: 110px;height: 110px;" />
					</el-form-item>
				</div>
				<div class="p20">
					<div class="fb mb20 pl10">
						登记适用范围和方法
					</div>
					<el-form-item label="作物场所：" prop="cropLocation">
						<div class="item-width">
							{{form.cropLocation}}
						</div>
					</el-form-item>
					<el-form-item label="防治对象：" prop="controlObject">
						<div class="item-width">
							<dict-tag :options="bus_control_object" :value="form.controlObject" />
						</div>
					</el-form-item>
					<el-form-item label="用药量：" prop="dosage">
						<div class="item-width">
							{{form.dosage}}
						</div>
					</el-form-item>
					<el-form-item label="施用方式：" prop="applicationMethod">
						<div class="item-width">
							<dict-tag :options="bus_application_mode" :value="form.applicationMethod" />
						</div>
					</el-form-item>
				</div>	
				<div class="p20">
					<div class="fb mb20 pl10">
						推荐适用范围和方法
					</div>
					<el-form-item label="推荐适用作物：" prop="recommendedCrops1">
						<div class="item-width">
							{{form.cropName}}
							<!-- <el-option v-for="dict in cropNameArr" :key="dict.id*1" :label="dict.cropName"
								:value="dict.id" /> -->
						</div>
					</el-form-item>
					<el-form-item label="推荐适用靶标：" prop="recommendedTargets1" >
						<div class="item-width">
							<dict-tag :options="bus_target" :value="form.recommendedTargets1" />
						</div>
					</el-form-item>
				</div>	
				<div class="p20">
					<div class="fb mb20 pl10">
						其他信息
					</div>
					<el-form-item label="电子标签：" prop="electronicLabel">
						<div class="item-width">
							{{form.electronicLabel}}
						</div>
					</el-form-item>
					<el-form-item label="销售渠道：" prop="salesChannel">
						<div class="item-width">
							<dict-tag :options="bus_channel" :value="form.salesChannel" />
						</div>
					</el-form-item>
					<el-form-item label="储存运输方法：" prop="storageTransportationMethod" >
						<div class="item-width">
							{{form.storageTransportationMethod}}
						</div>
					</el-form-item>
					<el-form-item label="质量保质期：" prop="shelfLife">
						<div class="item-width">
							{{form.shelfLife}}
						</div>
					</el-form-item>
					<br>
					<el-form-item label="产品性能：" prop="productPerformance">
						<div class="pr30" style="width: 575px;">
							{{form.productPerformance}}
						</div>
					</el-form-item>
					<el-form-item label="使用技术要求：" prop="technicalRequirements">
						<div style="width: 575px;">
							{{form.technicalRequirements}}
						</div>
					</el-form-item>
					<el-form-item label="注意事项：" prop="precautions">
						<div class="pr30" style="width: 575px;">
							{{form.precautions}}
						</div>
					</el-form-item>
					<el-form-item label="中毒急救措施：" prop="poisoningFirstAid">
						<div style="width: 575px;">
							{{form.poisoningFirstAid}}
						</div>
					</el-form-item>
					<el-form-item label="备注信息：" prop="remark">
						<div class="pr30" style="width: 575px;">
							{{form.remark}}
						</div>
					</el-form-item>
				</div>	
			</div>
		</el-form>
	</div>
</template>
<script setup name="addCustomer">
	const {
		proxy
	} = getCurrentInstance();
	const {
		bus_product_type,//产品类型
		bus_product_category,//产品类别
		bus_toxicity,//毒性
		bus_sosage_form,//剂型
		bus_control_object,//防治对象
		bus_application_mode,//施用方式
		bus_target,//靶标
		bus_channel,//渠道
		bus_active_ingredient_content//单位
	} =
	proxy.useDict(
	"bus_product_type",
	"bus_product_category",
	"bus_toxicity",
	"bus_sosage_form",
	"bus_control_object",
	"bus_application_mode",
	"bus_target",
	"bus_channel",
	"bus_active_ingredient_content");
</script>
<script>
	import {
		getProduct,//产品详情
	} from "@/api/business/product";
	import {
		cropVariety,//获取作物
	} from "@/api/business/customer";
	export default {
		data() {
			return {
				form: {
					id: '',
					classifyId: '',
					productType: '',
					productName: '',
					brandName: '',
					productCode: '',
					productCategory: '',
					pesticideRegistrationNumber: '',
					pesticideProductionLicenseNumber: '',
					productQualityStandardNumber: '',
					toxicity: '',
					productPromoImageUrl: '',
					productImageUrl: '',
					dosageForm: '',
					activeIngredient1: '',
					activeIngredientContent1: '',
					activeIngredientUnit1: '',
					activeIngredient2: '',
					activeIngredientContent2: '',
					activeIngredientUnit2: '',
					activeIngredient3: '',
					activeIngredientContent3: '',
					activeIngredientUnit3: '',
					cropLocation: '',
					controlObject: '',
					dosage: '',
					applicationMethod: '',
					recommendedCrops: '',
					recommendedCrops1: '',
					recommendedTargets: '',
					recommendedTargets1: '',
					electronicLabel: '',
					salesChannel: '',
					storageTransportationMethod: '',
					shelfLife: '',
					productPerformance: '',
					technicalRequirements: '',
					precautions: '',
					poisoningFirstAid: '',
					remark: '',
				},
				loading: false,
				cropNameArr: [], //作物名称
			}
		},
		created() {
			this.form.id = this.$route.query.id ? this.$route.query.id : ''
			if(this.form.id == ''){
				this.form = this.$route.query.form ? JSON.parse(this.$route.query.form) : ''
				
			}else{
				//获取所有作物
				this.cropVariety()
				
			}
			
		},
		methods: {
			// 详情
			getProductDetail() {
				getProduct(this.form.id).then(res => {
					this.form = res.data
					this.form.recommendedTargets1 = res.data.recommendedTargets.split(',')
					this.form.recommendedCrops1 = res.data.recommendedCrops.split(',')
					let arr = []
					this.form.recommendedCrops1 = this.form.recommendedCrops == '' ? [] : this.form.recommendedCrops.split(',')
					for(let key in this.cropNameArr){
						for(let i in this.form.recommendedCrops1){
							if(this.form.recommendedCrops1[i] == this.cropNameArr[key].id){
								arr.push(this.cropNameArr[key].cropName)
							}
						}
					}	
					this.form.cropName = arr.join(',')
				})
			},
			// 获取作物列表
			cropVariety() {
				cropVariety().then(response => {
					this.cropNameArr = response.rows
					
					
					// 获取详情
					this.getProductDetail()
				})
			}
		}
	}
</script>

<style>
	.item-width{
		width: 240px;
	}
	.el-form-item--default .el-form-item__label{
		color: #8c939d;
		font-weight: normal;
	}
	.avatar-uploader .el-upload {
		background: #F7F8FA;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
		width: 110px;
		height: 110px;
		text-align: center;
		line-height: 22px;
		color: #8c939d;
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}

	.shopImg {
		width: 110px;
		height: 110px;
	}
</style>